<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" href="./css/setting.css">
		<link rel="stylesheet" href="./css/common.css">
		<link rel="stylesheet" type="text/css" href="./css/hui.css" />
		<title>找回密码</title>
	</head>
	<style type="text/css">
		body {
			background: #EAEAEC;
			padding: 0px;
			margin: 0px;
		}

		.title {
			width: 200px;
			height: 40px;
			line-height: 40px;
			position: absolute;
			left: 50%;
			margin-left: -100px;
			font-size: 17px;
			color: #000000;

		}

		#hui-back:before {
			color: #2439A5;
		}

		.hui-header {
			background: #FFF;
		}

		.form {
			width: 100%;
			background: #FFFFFF;
			margin-top: 16px;
		}

		.check {
			height: 49px;
			line-height: 49px;
			border-bottom: 1px solid #EAEAEC;
			margin-left: 20px;
			box-sizing: border-box;
			position: relative;
		}

		.hint {
			font-size: 14px;
			color: #666666;
		}

		.import {
			border: 0px;
			position: absolute;
			left: 80px;
			height: 30px;
			width: 200px;
			top: 50%;
			margin-top: -15px;
			font-size: 14px;
		}

		.send {
			position: absolute;
			width: 70px;
			height: 24px;
			right: 16px;
			top: 50%;
			margin-top: -12px;
			line-height: 24px;
			text-align: center;
			border: 1px solid #2439A5;
			color: #2439A5;
			border-radius: 2px;
			font-size: 12px;
			background: #fff;
		}

		.service {
			height: 20px;
			padding-left: 20px;
			margin-top: 16px;
			position: relative;
		}

		.btn {
			background: #2439A5;
			text-align: center;
			margin: 16px;
			height: 47px;
			line-height: 47px;
			border-radius: 24px;
			font-size: 18px;
			color: #FFFFFF;
			margin-top: 48px;
		}
	</style>
	<body>
		<!--<header>-->
		<!--<img id="hui-back" src="./img/back.png" alt="back">找回密码-->
		<!--</header>-->
		<header class="hui-header">
			<div id="hui-back"></div>
			<span class="title">找回密码</span>
		</header>
		<nav>
			<div class="step1">1.验证手机号码</div>
			<div class="step2">2.设置新密码</div>
		</nav>
		<div class="hui-wrap">
			<form id="from">
				<div class="form" id="form1">
					<div class="check">
						<span class="hint">手机号码</span>
						<input id="phone" name="phone" type="text" class="import" checkType="string" checkData="11" checkMsg="手机号码为11个字符"
						 placeholder="请输入注册手机号码">
					</div>
					<div class="check">
						<span class="hint">验证码</span>
						<input id="code" type="text" class="import" placeholder="请输入短信验证码" checkType="reg" checkData="^\d{6,6}$" checkMsg="验证码应该为6个数字">
						<button onclick="getcode()" class="send">发送验证码</button>
					</div>
					<!--<div class="check">-->
					<!--<span class="hint">登录密码</span>-->
					<!--<input id="pwd" name="password" type="password" class="import" placeholder="请设置6-20位登录密码" checkType="string" checkData="6,20" checkMsg="密码应为6-20个字符">-->
					<!--</div>-->
					<!--<div class="check" style="border: none">-->
					<!--<span class="hint">确认密码</span>-->
					<!--<input type="password" class="import" placeholder="请在此之前确认密码" checkType="sameWithId" checkData="pwd" checkMsg="两次密码不一致">-->
					<!--</div>-->
				</div>
				<div onclick="next()" class="btn">下一步</div>
			</form>

		</div>
		<script src="./js/jquery.min.js"></script>
		<script src="./js/chen-url.js"></script>
		<script src="./js/hui.js" type="text/javascript" charset="utf-8"></script>
		<script>
			hui.ready(function() {
				if (localStorage.getItem("uasername") != null) {
					hui('#phone').val(localStorage.getItem("uasername"));
				}
			});

			var countdown = 60;
			$('.send').on('click', function() {
				if ($("#phone").val() == "" || $("#phone").val() == null) {
					return false;
				}
				var obj = $(".send");
				settime(obj);
			})

			function settime(obj) { //发送验证码倒计时
				if (countdown == 0) {
					obj.attr('disabled', false);
					//obj.removeattr("disabled");
					obj.html("获取验证码");
					countdown = 60;
					return;
				} else {
					obj.attr('disabled', true);
					obj.html(countdown + 's');
					countdown--;
				}
				setTimeout(function() {
					settime(obj)
				}, 1000)
			};

			// 获取验证码
			var code = "";

			function getcode() {
				var phone = $("#phone").val();
				if (phone == "") {
					hui.iconToast('请先输入手机号码！', 'warn');
				}
				// 获取手机号码
				// $.ajax({
				// 	type: "POST",
				// 	dataType: "json",
				// 	url: address + "user/getCode?phone=" + phone,
				// 	success: function(res) {
				// 		if (res.code == 200) {
				// 			hui.iconToast(res.data, 'success');
				// 			code = res.data;
				// 		}
				// 	},
				// 	error: function(data) {
				// 		hui.iconToast('操作失败', 'warn');
				// 	}
				// });
				$.ajax({
					url: 'address + "user/getCode',
					type: 'post',
					dateType: 'json',
					headers: {
						'Content-Type': 'application/json;charset=utf8',
						'phone': phone
					},
					data: JSON.stringify(org),
					success: function(data) {
						console.log(data);
					},
					error: function(data) {
						console.log("error");
					}
				});
			}

			function next() {
				if ($('#code').val != code) {
					hui.iconToast("验证码错误！", 'warn');
					return false;
				}

				hui.open('14_2.html');
			}
		</script>
	</body>

</html>
